<style>
.lease-detail{
	display: flex;
	flex-direction: column;
	/* flex: 1; */
	width: 750upx;
}
.lease-list{
	
}
.lease-list .uni-list-cell:hover{
	background-color: #fff;
}
.topimg image{
	width: 100%;
}
.detail-txt{
	display: flex;
	flex-direction: row;
	padding: 6upx 0;
	border-bottom: 1upx solid #e6e6e6;
}
.detail-txt .item{
	/* display: flex;
	flex: 1;
	flex-direction: column;
	align-items:center; */
	position: relative;
	width: 33.333%;
	text-align: center;
}
.detail-txt .item .border{
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -25upx;
	height: 50upx;
	width: 3upx;
	background: #e6e6e6;
}
.btn-box{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}
.btn-box button{
	border-radius: 0;
	background: #0faeff;
}
.wechat{
	background: #00B26A;
}
.musk-container{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	background: rgba(0,0,0,0.5);
	z-index: 20;
}
.musk-box{
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 21;
	/* height: 500px; */
	background: #fff;
	text-align: center;
	padding: 40px 40px 60px 40px;
	font-size: 18px;
}
.musk-box button{
	margin-top: 15px;
}
.musk-title{
	font-size: 30px;
}
.money-box{
	display: flex;
	justify-content: center;
	margin-bottom: 15px;
}
.musk-box .money{
	/* margin: 0 auto;
	width: 50%; */
	display: inline-block;
	width: 300px;
	text-align: left;
	border-bottom: 1px solid #BEBEBE;
}
.uni-media-list{
	display: flex;
	align-items: center;
}
.uni-list-cell:after {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    left: 0;
}
.lease-btn{
	font-size: 28upx;
}
.sell-num{
	justify-content: flex-start;
}
.appraise-item{
	display: flex;
	justify-content: flex-start;
	border-bottom: 1px solid #eee;
}
.appraise-item-title{
	/* width: 156upx; */
	white-space: nowrap;
    max-width: 180px;
    text-overflow: ellipsis;
    overflow: hidden;
}
.appraise-item-desc{
	white-space: pre-wrap;
}
.uniCollapseItem {
	position: relative;
	padding: 8upx 0;
	/* border-bottom: 1upx solid #eee; */
}

.uniCollapseItem .arrow{
	position: absolute;
	top: 12upx;
	right: 10upx;
	width: 40upx;
	height: 40upx;
	transform:  rotate(0deg);
	transform-origin: center center;
	transition: transform 0.3s;
}
.uniCollapseItem .arrow.open{
	transform:  rotate(-180deg);
}
.uniCollapseItemBody{
	/* transform:translateY(100%); */
}
.uniCollapseItemBody.open{
	transition: transform 2s linear;
}

</style>

<template>
	<view class="lease-detail">
		<!-- <div class="topimg">
			<image :src="lease.pic" mode=""></image>
		</div>
		<div class="detail">
			<div class="detail-txt">
				<div class="item">
					<div class="border"></div>
					<div>名称</div>
					<div class="sub">{{lease.name}}</div>
				</div>
				<div class="item">
					<div class="border"></div>
					<div>租金</div>
					<div class="sub">{{lease.price}}元/小时</div>
				</div>
				<div class="item">
					<div class="border"></div>
					<div>店铺</div>
					<div class="sub">{{lease.bname}}</div>
				</div>
			</div>
		</div> -->
		<view class="lease-list" v-if="list.length>0">
			<view class="uni-list">
				<view class="uni-list-cell" hover-class="uni-list-cell-hover" v-for="(item,index) in list" :key="index">
					<view class="uni-media-list" style="flex-direction: column;" @click="toLeaseDetail(item)">
						<view style="display: flex;width: 100%;flex-direction: row;align-items: center;">
							<image class="uni-media-list-logo" :src="item.pic"></image>
							<view class="uni-media-list-body" >
								<view class="uni-media-list-text-top">
								      {{item.rname}}
								      <text>({{item.status==0 ? '下架' : item.status==1 ? '可租':item.status==2 ?'在租' :''  }})</text>
								</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{item.bname}}</view>
								<view class="uni-media-list-text-bottom uni-ellipsis">{{item.addr}}</view>
								<!-- <view class="uni-media-list-text-bottom uni-ellipsis"></view> -->
								<view class="sell-num">
									<text class="fl">¥{{item.price}}元/小时</text>
									<text class="fl">(需押金:{{item.deposit}}元)</text>
									<!-- <text class="fr">已租30</text> -->
								</view>
							</view>
							<view class="lease-btn-box">
								<text v-if="item.sh&&item.status==2">租用审核中</text>
								<button type="primary" v-if="item.status==1" class="lease-btn" @click="toPay(item,index)">我要租</button>
							</view>
						</view>
						<view style="width: 100%;margin-top: 10upx;">
							<view>
								<view class="uniCollapseItem close"  @click.stop="openCollapseItem(item)" :class="{open: item.open==true }">
									租赁评价
									<uni-icon color="#bbb" size="20" class="arrow" :class="{open: item.open==true }" type="arrowdown"></uni-icon>
								</view>
								<view v-show="item.open" class="uniCollapseItemBody" :class="{open: item.open==true }">
									<view style="padding: 20upx;" v-if="item.appraiseList.length == 0">暂无评价</view>
									<view style="padding: 20upx;"  class="appraise-item" v-for="(val,index) in item.appraiseList" :key="index">
										<text class="appraise-item-title">{{val.nickname}}</text>
										<text class="appraise-item-desc">：{{val.appraise}}</text>
									</view>
								</view>
							</view>
							<!-- <uniCollapse accordion="true" >
								<uniCollapseItem title="租赁评价">
									<view style="padding: 20upx;" v-if="item.appraiseList.length == 0">暂无评价</view>
									<view style="padding: 20upx;"  class="appraise-item" v-for="(val,index) in item.appraiseList" :key="index">
										<text class="appraise-item-title">{{val.nickname}}</text>
										<text class="appraise-item-desc">：{{val.appraise}}</text>
									</view>
								</uniCollapseItem>
							</uniCollapse> -->
						</view>
					</view>
					
				</view>
			</view>
		</view>
		
		
		
		<view v-if="list.length==0" class="nodata">
			<image src="../../../static/img/nodata.png" mode=""></image>
		</view>
		<div class="nomore" v-if="!hasMore&&list.length>0">没有更多了</div>
		<!-- <div class="btn-box" v-if="!payShow" @click="toPay">
			<button type="primary" >我要租</button>
		</div> -->
		<div class="musk-container" v-if="payShow" @click="cancel">
			<div class="musk-box" @click.stop>
				<!-- <div class="musk-title">请输入租金</div> -->
				<div class="money-box">
					<span>租金：</span>
					<input type="number" class="money" focus v-model="payNum" placeholder="请输入租金" />
				</div>
				
				<button type="primary" class="alipay">支付宝支付</button>
				<button type="primary" class="wechat" >微信支付</button>
			</div>
		</div>
	</view>
</template>

<script>
	import {
	    mapState,
	    mapMutations
	} from 'vuex'
	import uniCollapse from "@/components/uni-collapse/uni-collapse.vue"
	import uniCollapseItem from "@/components/uni-collapse-item/uni-collapse-item.vue"
	import uniIcon from "@/components/uni-icon.vue"
	
	export default {
		components:{
			uniCollapse,
			uniCollapseItem,
			uniIcon
		},
		data() {
			return {
				lease:{
					img:'https://img13.360buyimg.com/mobilecms/s308x308_jfs/t5791/356/9076907884/116935/2962532f/5981878aN85d0219a.jpg!q70.dpg.webp',
					name:'超威电池',
					price:'2元/小时',
					store:'小鸟电动车',
					time:'2018-12-12'
				},
				payShow:false,
				payNum:'',
				list:[],
				pageNum:1,
				pageSize:20,
				hasMore:true
			};
		},
		computed:{
			...mapState(['userInfo'])
		},
		methods:{
			openCollapseItem(item){
				item.open = item.open ==true ? false : true
				console.log(item.open);
			},
		   toPay(item,index){
			   // this.payShow = true
			   let that = this
			   let uid = this.userInfo.uid
			   let bid = item.bid
			   let did = item.did
			   console.log(this.userInfo);
			   // return 
			   if(!uid){
				   uni.navigateTo({
				   	url:'../../login/login'
				   })
			   }else{
				   uni.request({
				   	url: that.httpUrl + 'resLease/lease',
				   	method: 'POST',
				   	header: {
				   		'content-type': 'application/x-www-form-urlencoded'
				   	},
				   	data: {
				   		uid: uid,
				   		did: did,
				   		bid:bid
				   	},
				   	success: (res) => {
				   		// console.log(res)
				   		if (res.data.code == 1) {
							item.status = 2
							item.sh = 1
				   			uni.showToast({
				   				title: '申请成功，请等待审核',
				   				icon: 'none',
				   				mask: true
				   			})
				   		} else {
				   			uni.showToast({
				   				title: res.data.msg,
				   				icon: 'none',
				   				mask: true
				   			})
				   		}
				   	}
				   })
			   }
// 			   if(!this.userInfo.deposit){
// 				   uni.showToast({
// 				   	title: '请先缴纳押金',
// 				   	icon: 'none',
// 				   	mask: true
// 				   })
// 				   return
// 			   }
			   
		   },
		   cancel(){
			   this.payShow = false
			   this.payNum = ''
		   },
		   getDetail(lid){
			   let that = this
			   uni.request({
			   	url: this.httpUrl + 'leaseResDetail/list4Page',
			   	method: 'POST',
			   	header: {
			   		'content-type': 'application/x-www-form-urlencoded'
			   	},
			   	data: {
			   		lid,
					pageNum:that.pageNum,
					pageSize:that.pageSize,
					// status:1
			   	},
			   	success: (res) => {
			   		// console.log(res)
			   		if (res.data.code == 1) {
						res.data.data.data.forEach(val=>{
							val.open = false
						})
			   			that.list.push(...res.data.data.data)
						
// 						that.list.forEach(item=>{
// 							switch (item.status){
// 								case 0:
// 								    item.status = '下架'
// 								case 1:
// 								    item.status = '可用'
// 								case 2:
// 								    item.status = '在租'		
// 									break;
// 								default:
// 									break;
// 							}
// 						}) 
			   			if(res.data.data.data.length < that.pageSize){
			   				that.hasMore = false
			   			}else{
			   				that.hasMore = true
			   				that.pageNum ++
			   			}
			   		} else {
			   			uni.showToast({
			   				title: res.data.msg,
			   				icon: 'none',
			   				mask: true
			   			})
			   		}
			   	}
			   })
		   },
		   toInfo(item){
			   uni.navigateTo({
			   	url:'../leaseInfo/leaseInfo?item='+JSON.stringify(item)
			   })
		   },
		   toLeaseDetail(item){
// 		   	uni.navigateTo({
// 		   		url:'../../leaseList/leaseDetail/leaseDetail?item='+JSON.stringify(item)
// 		   	})
		   }
		},
		onReachBottom(){
		  if(this.hasMore){
			  this.getDetail(this.lease.lid)
		  }
		},
		onLoad(item) {
			this.lease=JSON.parse(item.item)
			this.getDetail(this.lease.lid)
			console.log(uniCollapse);
		}
	}
</script>
